<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  
  <canvas id="can"></canvas>

  <script>
    // 1. 获取画布对象
    // const oCan = document.getElementById('can');

    // // 2. 获取绘制2d的渲染上下文
    // const ctx = oCan.getContext('2d');

    // // 保存客户端元素对象
    // const documentElement = document.documentElement;
    
    // // 3. 设置画布的宽高
    // oCan.width = documentElement.clientWidth;
    // oCan.height = documentElement.clientHeight;

    /*
      Canvas 2d 坐标系：PX
       0/0---1---2---3------- X: LEFT
       |
       1     *
       |
       2         *
       |
       3             *
       |
       Y: TOP
    */

    /**
     * stroke => 描边（画线、空心）
     * fill => 填充（实心）
     */
    // 描边和填充颜色的设置

    //  ctx.strokeStyle = 'red';
    //  ctx.fillStyle = 'orange';

    /**
     * 绘制矩形
     * 默认颜色：#000
     * 参数列表：
     * 1. 横坐标：x
     * 2. 纵坐标：y
     * 3. 矩形宽度：width
     * 4. 矩形高度：height
     */

     // 绘制描边矩形  rect
     /**
      * uni => 一个,单独 => uniform => 变成一个的
      * bi => bicycle => 两轮车 => 自行车
      * tri => three => 3
      */

    // ctx.strokeRect(100, 100, 150, 120);
    // ctx.strokeRect(300, 300, 150, 150);

    // // 绘制填充矩形
    // ctx.fillRect(600, 100, 150, 300);
    // ctx.fillRect(400, 400, 120, 120);

    // setTimeout(() => {
    //   // 清除画布内容
    //   // 通过把像素点的颜色设置为透明来达到清除一个矩形区域的内容的目的
    //   // 清除一个特定矩形范围内的内容
    //   ctx.clearRect(0, 0, oCan.width, oCan.height);
    // }, 1000);

    /**
     * CanvasRenderingContext2D.strokeRect() 绘制描边矩形
     * CanvasRenderingContext2D.fillRect()   绘制填充矩形
     * CanvasRenderingContext2D.clearRect()  清除矩形范围内的绘制
     */

  </script>
  <script src="rect.js"></script>
</body>
</html>